<template>
  <view class="container">
    <!-- 聊天内容区域 -->
    <scroll-view 
      class="chat-list" 
      scroll-y 
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
	  
    >
      <view 
        v-for="(item, index) in chatList" 
        :key="index" 
        class="chat-item"
		
        :class="item.role === 'user' ? 'user' : 'assistant'"
      >
        <view class="content-box" :style="item.role === 'user' ? 'right:0' : '0'">
          <text class="content">{{ item.content }}</text>
          <text class="time">{{ item.time }}</text>
        </view>
        <view v-if="item.loading" class="loading">
          <view class="dot"></view>
          <view class="dot"></view>
          <view class="dot"></view>
        </view>
      </view>
    </scroll-view>

    <!-- 输入区域 -->
    <view class="input-area">
      <input 
        class="input" 
        v-model="inputMessage" 
        placeholder="请输入问题..."
        @confirm="sendMessage"
        :disabled="isSending"
        placeholder-class="placeholder"
      />
      <button 
        class="send-btn"
		:style="{'--main-color':themeColor.main_color}"
        @tap="sendMessage"
        :disabled="isSending || !inputMessage"
      >
        {{ isSending ? '发送中...' : '发送' }}
      </button>
    </view>
  </view>
</template>

<script>
// const API_KEY = 'sk-d9af522563fe455787e9ee49c46ef972' // 替换为你的API密钥 老板的
const API_URL = 'https://api.deepseek.com/chat/completions' // 替换为实际API地址
const API_KEY = 'sk-3d8e3af2a1c04476acf47d7f326a2aa8' // 替换为你的API密钥 自己的
export default {
  data() {
    return {
      chatList: [],
      inputMessage: '',
      isSending: false,
      scrollTop: 0,
	  height:0,
	  themeColor:'',
	  wechatConfig:'',
	  userInfo:'',
    }
  },
  onLoad() {
	  this.themeColor = this.$store.state.themeConfig || uni.getStorageSync('themeConfig')
	  this.wechatConfig = this.$store.state.wechatConfig ||  uni.getStorageSync('wechatConfig')
	  // this.getAnswersSparkDesk();
	  // this.getAnswersSparkDeskAi();
	  this.userInfo = uni.getStorageSync('userInfo')
	const info = uni.getSystemInfoSync();
  	this.height = info.screenHeight
  },
  methods: {
    async sendMessage() {
      if (!this.inputMessage.trim() || this.isSending) return
      
      const userMessage = {
        role: 'user',
        content: this.inputMessage,
        time: this.getCurrentTime(),
        loading: false
      }
      
      // 添加用户消息
	  console.log(userMessage)
      this.chatList.push(userMessage)
      this.inputMessage = ''
      
      // 添加AI的loading状态
      const assistantMessage = {
        role: 'assistant',
        content: '',
        time: '',
        loading: true
      }
      this.chatList.push(assistantMessage)
      
      this.isSending = true
      this.scrollToBottom()
      
      try {
        const res = await uni.request({
          url: API_URL,
          method: 'POST',
          header: {
			'Access-Control-Allow-Origin':'*',
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${API_KEY}`
          },
          data: {
            model: 'deepseek-chat', // 模型
            messages: this.chatList
              .filter(item => !item.loading)
              .map(item => ({
                role: item.role,
                content: item.content
              }))
          }
        })
        
        // 更新AI消息
        const lastIndex = this.chatList.length - 1
		try{
			console.log(res)
			this.chatList[lastIndex] = {
			  role: 'assistant',
			  content: res[1].data.choices[0].message.content.replaceAll('**','').replaceAll('#',''),
			  time: this.getCurrentTime(),
			  loading: false
			}
		}catch(e){
			this.chatList[lastIndex] = {
			  role: 'assistant',
			  content: res[1].data.choices[0].message.content,
			  time: this.getCurrentTime(),
			  loading: false
			}
		}
        
        
        this.$forceUpdate()
		
		console.log(this.chatList)
      } catch (error) {
        console.error('API请求失败:', error)
        uni.showToast({
          title: '请求失败，请重试',
          icon: 'none'
        })
        this.chatList.pop() // 移除loading状态的消息
      } finally {
        this.isSending = false
        this.scrollToBottom()
      }
    },
    
    getCurrentTime() {
      const date = new Date()
      return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
    },
    
    scrollToBottom() {
      this.$nextTick(() => {
        this.scrollTop = Math.random() * 1000000 // 通过随机数强制滚动到底部
      })
    }
  }
}
</script>

<style scoped>
/* 新增修改的样式 */
.container {
  padding-bottom: 120rpx; /* 给输入框留出空间 */
}

.chat-list {
  padding: 0rpx 0rpx 30rpx; /* 底部留白防止遮挡 */
}

.chat-item {
  margin: 0rpx 0rpx 20px 0rpx;
}

.content-box {
  max-width: 75%;
  padding: 20rpx 28rpx;
  border-radius: 16rpx;
  margin: 0 20rpx;
  position: relative;
}

.user .content-box {
	margin-top: 45rpx;
  background: #F16C64FF;
  color: white;
  margin-left: auto; /* 右对齐关键属性 */
}

.assistant .content-box {
	margin-top: 45rpx;
  background: #f8f8f8;
  color: #333;
  margin-right: auto; /* 左对齐关键属性 */
}

.time {
  font-size: 24rpx;
  color: #999;
  position: absolute;
  bottom: -40rpx;
  /* white-space: nowrap; */
}

/* 新版加载动画 */
.loading {
  display: flex;
  align-items: center;
  padding: 20rpx;
}

.dot {
  width: 12rpx;
  height: 12rpx;
  background: #ddd;
  border-radius: 50%;
  margin: 0 4rpx;
  animation: bounce 1.4s infinite ease-in-out;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  0%, 80%, 100% { 
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10rpx);
  }
}

/* 输入区域样式优化 */
.input-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
  box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.05);
}

.input {
  flex: 1;
  height: 80rpx;
  padding: 0 28rpx;
  background: #e9e9e9;
  border-radius: 40rpx;
  font-size: 28rpx;
  color: #333;
  border: none;
}

.placeholder {
  color: #999;
}

.send-btn {
  width: 140rpx;
  height: 80rpx;
  line-height: 80rpx;
  margin-left: 20rpx;
  background: var(--main-color);
  color: white;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none;
}

.send-btn[disabled] {
	opacity: 0.6;
	background: var(--main-color);
    color: white;
}
</style>
